<!-- 多纵坐标图 -->
<template>
  <div id="muti-y" style="width: 530px; height: 400px;"></div>
</template>

<script setup>
import * as echarts from 'echarts';
import { reactive, onMounted, watch } from 'vue';
import { useStore } from '@/store/useStore';

const store = useStore();
const colors = ['#5470C6', '#EE6666'];
const option = reactive({
  color: colors,
  title: {
    text: '时间分布',
    left: '16'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross'
    }
  },
  grid: {
    right: '20%'
  },
  toolbox: {
    feature: {
      saveAsImage: { show: true }
    }
  },
  legend: {
    data: ['总建筑面积', '栋数']
  },
  xAxis: [
    {
      type: 'category',
      axisTick: {
        alignWithLabel: true
      },
      // prettier-ignore
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
    }
  ],
  yAxis: [
    {
      type: 'value',
      name: '总建筑面积',
      position: 'right',
      alignTicks: true,
      axisLine: {
        show: true,
        lineStyle: {
          color: colors[0]
        }
      },
      axisLabel: {
        formatter: '{value} 万㎡'
      }
    },
    {
      type: 'value',
      name: '栋数',
      position: 'left',
      alignTicks: true,
      axisLine: {
        show: true,
        lineStyle: {
          color: colors[0]
        }
      },
      axisLabel: {
        formatter: '{value}'
      }
    }
  ],
  series: [
    {
      name: '总建筑面积',
      type: 'bar',
      data: [
      ]
    },
    {
      name: '栋数',
      type: 'line',
      yAxisIndex: 1,
      data: []
    }
  ]
})
let mutiy = null;

watch(() => store.areasByTime, () => {
  if (store.areasByTime && store.dsByTime) {
    option.series[0].data = store.areasByTime.map(item => (item / 10000).toFixed(2));
    option.series[1].data = store.dsByTime;
  }
  mutiy.dispose();

  mutiy = echarts.init(document.getElementById("muti-y"));
  option && mutiy.setOption(option);
}, { deep: true })

onMounted(() => {
  mutiy = echarts.init(document.getElementById("muti-y"));
  option && mutiy.setOption(option);
});
</script>

<style scoped></style>
